<template>
  <div class="hotel-detail">
    <div class="detail-header">
      <h2>{{ hotel.name }}</h2>
      <div class="credit-info" v-if="userCreditScore">
        <span>当前信用分：{{ userCreditScore }}</span>
        <el-tag :type="getCreditTagType(userCreditScore)">
          {{ getCreditLevel(userCreditScore) }}
        </el-tag>
      </div>
    </div>

    <div class="detail-content">
      <!-- 酒店图片 -->
      <div class="hotel-images">
        <el-carousel height="400px">
          <el-carousel-item v-for="(image, index) in hotelImages" :key="index">
            <el-image :src="image" fit="cover" />
          </el-carousel-item>
        </el-carousel>
      </div>

      <!-- 酒店信息 -->
      <div class="hotel-info">
        <div class="info-section">
          <h3>基本信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">星级</span>
              <span class="value">
                <el-rate
                  v-model="hotel.starLevel"
                  disabled
                  show-score
                  text-color="#ff9900"
                />
              </span>
            </div>
            <div class="info-item">
              <span class="label">开业时间</span>
              <span class="value">{{ hotel.openYear }}年</span>
            </div>
            <div class="info-item">
              <span class="label">装修时间</span>
              <span class="value">{{ hotel.renovationYear }}年</span>
            </div>
            <div class="info-item">
              <span class="label">房间数</span>
              <span class="value">{{ hotel.roomCount }}间</span>
            </div>
            <div class="info-item">
              <span class="label">入住时间</span>
              <span class="value">14:00后</span>
            </div>
            <div class="info-item">
              <span class="label">离店时间</span>
              <span class="value">12:00前</span>
            </div>
          </div>
        </div>

        <div class="info-section">
          <h3>酒店设施</h3>
          <div class="facilities">
            <el-tag v-if="hotel.hasParking" type="success">停车场</el-tag>
            <el-tag v-if="hotel.hasWifi" type="success">免费WiFi</el-tag>
            <el-tag v-if="hotel.hasSwimmingPool" type="success">游泳池</el-tag>
            <el-tag v-if="hotel.hasGym" type="success">健身房</el-tag>
            <el-tag v-if="hotel.hasRestaurant" type="success">餐厅</el-tag>
            <el-tag v-if="hotel.hasConferenceRoom" type="success">会议室</el-tag>
            <el-tag v-if="hotel.hasSpa" type="success">SPA</el-tag>
            <el-tag v-if="hotel.hasBusinessCenter" type="success">商务中心</el-tag>
          </div>
        </div>

        <div class="info-section">
          <h3>酒店描述</h3>
          <p class="description">{{ hotel.description }}</p>
        </div>

        <div class="info-section">
          <h3>位置信息</h3>
          <p class="address">{{ hotel.address }}</p>
          <div class="map-container">
            <!-- 这里可以集成地图组件 -->
          </div>
        </div>
      </div>

      <!-- 房型列表 -->
      <div class="room-list">
        <h3>房型列表</h3>
        <el-table :data="hotel.rooms" style="width: 100%">
          <el-table-column prop="name" label="房型" width="180" />
          <el-table-column prop="bedType" label="床型" width="120" />
          <el-table-column prop="area" label="面积" width="100">
            <template #default="scope">
              {{ scope.row.area }}㎡
            </template>
          </el-table-column>
          <el-table-column prop="breakfast" label="早餐" width="100">
            <template #default="scope">
              {{ scope.row.breakfast ? '含早' : '不含早' }}
            </template>
          </el-table-column>
          <el-table-column prop="currentPrice" label="价格" width="150">
            <template #default="scope">
              <span class="price">¥{{ scope.row.currentPrice }}</span>
              <span class="original-price" v-if="scope.row.originalPrice">
                ¥{{ scope.row.originalPrice }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="occupancyRate" label="入住率" width="150">
            <template #default="scope">
              <el-progress
                :percentage="scope.row.occupancyRate"
                :status="getOccupancyStatus(scope.row.occupancyRate)"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button
                type="primary"
                size="small"
                @click="handleBook(scope.row)"
              >
                预订
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 信用优惠信息 -->
      <div class="credit-benefits" v-if="userCreditScore">
        <h3>信用优惠</h3>
        <div class="benefits-list">
          <div class="benefit-item" v-if="isDepositFree">
            <el-icon><Check /></el-icon>
            <span>信用分{{ userCreditScore }}分，享受免押金特权</span>
          </div>
          <div class="benefit-item" v-if="hasPriceDiscount">
            <el-icon><Check /></el-icon>
            <span>信用分{{ userCreditScore }}分，享受房价{{ priceDiscount }}折优惠</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 预订对话框 -->
    <el-dialog
      v-model="bookDialogVisible"
      title="确认预订"
      width="500px"
    >
      <hotel-booking-form
        v-if="selectedRoom"
        :hotel="hotel"
        :room="selectedRoom"
        :user-credit-score="userCreditScore"
        @submit="handleSubmitBooking"
        @cancel="bookDialogVisible = false"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Check } from '@element-plus/icons-vue'
import HotelBookingForm from '@/components/credit/HotelBookingForm.vue'
import { getHotelById } from '@/api/hotel'
import { getUserCreditScore } from '@/api/user'

const route = useRoute()
const router = useRouter()

// 数据
const hotel = ref(null)
const userCreditScore = ref(null)
const bookDialogVisible = ref(false)
const selectedRoom = ref(null)

// 模拟酒店图片数据
const hotelImages = ref([
  'https://example.com/hotel1.jpg',
  'https://example.com/hotel2.jpg',
  'https://example.com/hotel3.jpg'
])

// 计算属性
const isDepositFree = computed(() => {
  return userCreditScore.value >= 700
})

const hasPriceDiscount = computed(() => {
  return userCreditScore.value >= 600
})

const priceDiscount = computed(() => {
  if (userCreditScore.value >= 700) return 8
  if (userCreditScore.value >= 600) return 9
  return 10
})

// 方法
const loadHotelDetail = async () => {
  try {
    const response = await getHotelById(route.params.id)
    hotel.value = response.data
  } catch (error) {
    ElMessage.error('获取酒店详情失败')
  }
}

const loadUserCreditScore = async () => {
  try {
    const response = await getUserCreditScore()
    userCreditScore.value = response.data
  } catch (error) {
    ElMessage.error('获取信用分失败')
  }
}

const handleBook = (room) => {
  if (!userCreditScore.value) {
    ElMessage.warning('请先登录')
    router.push('/login')
    return
  }
  selectedRoom.value = room
  bookDialogVisible.value = true
}

const handleSubmitBooking = async (bookingData) => {
  try {
    // 处理预订提交
    bookDialogVisible.value = false
    router.push('/credit/hotel/orders')
  } catch (error) {
    ElMessage.error('提交预订失败')
  }
}

const getCreditTagType = (score) => {
  if (score >= 700) return 'success'
  if (score >= 600) return 'warning'
  return 'danger'
}

const getCreditLevel = (score) => {
  if (score >= 700) return '优秀'
  if (score >= 600) return '良好'
  return '一般'
}

const getOccupancyStatus = (rate) => {
  if (rate >= 80) return 'exception'
  if (rate >= 50) return 'warning'
  return 'success'
}

onMounted(() => {
  loadHotelDetail()
  loadUserCreditScore()
})
</script>

<style lang="scss" scoped>
.hotel-detail {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);

  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }

    .credit-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }
  }

  .detail-content {
    background-color: #fff;
    border-radius: 4px;
    padding: 20px;

    .hotel-images {
      margin-bottom: 20px;

      .el-image {
        width: 100%;
        height: 100%;
      }
    }

    .hotel-info {
      .info-section {
        margin-bottom: 30px;

        h3 {
          margin: 0 0 15px;
          font-size: 18px;
          color: #303133;
          border-bottom: 1px solid #ebeef5;
          padding-bottom: 10px;
        }

        .info-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;

          .info-item {
            .label {
              color: #909399;
              margin-right: 10px;
            }

            .value {
              color: #303133;
              font-weight: 500;
            }
          }
        }

        .facilities {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;

          .el-tag {
            margin-right: 10px;
            margin-bottom: 10px;
          }
        }

        .description {
          color: #606266;
          line-height: 1.6;
        }

        .address {
          color: #606266;
          margin-bottom: 10px;
        }

        .map-container {
          height: 300px;
          background-color: #f5f7fa;
          border-radius: 4px;
        }
      }
    }

    .room-list {
      margin-bottom: 30px;

      h3 {
        margin: 0 0 15px;
        font-size: 18px;
        color: #303133;
        border-bottom: 1px solid #ebeef5;
        padding-bottom: 10px;
      }

      .price {
        color: #f56c6c;
        font-weight: bold;
      }

      .original-price {
        color: #909399;
        text-decoration: line-through;
        margin-left: 5px;
      }
    }

    .credit-benefits {
      background-color: #f0f9eb;
      padding: 20px;
      border-radius: 4px;
      margin-bottom: 20px;

      h3 {
        margin: 0 0 15px;
        color: #67c23a;
      }

      .benefits-list {
        .benefit-item {
          display: flex;
          align-items: center;
          gap: 10px;
          color: #67c23a;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
</style> 